﻿var map;
var myLocation;
var mid = 1;
var infoWindow;

function initialize() {
    var myOptions = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            myLocation = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

            map.setCenter(myLocation);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }
    // Create the DIV to hold the control and call the HomeControl() constructor
    // passing in this DIV.
    var homeControlDiv = document.createElement('DIV');
    var homeControl = new HomeControl(homeControlDiv, map);

    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(homeControlDiv);
}

function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
    }

    var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);



/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
*/

function HomeControl(controlDiv, map) {

    // Set CSS styles for the DIV containing the control
    // Setting padding to 5 px will offset the control
    // from the edge of the map
    controlDiv.style.padding = '5px';

    // Set CSS for the control border
    var controlUI = document.createElement('DIV');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '2px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to set the map to Home';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior
    var controlText = document.createElement('DIV');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.innerHTML = 'Home';
    controlUI.appendChild(controlText);

    // Setup the click event listeners: simply set the map to Chicago
    google.maps.event.addDomListener(controlUI, 'click', function () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.setCenter(myLocation);
            });
        }
    });

}

function selectPlace() {
    google.maps.event.clearListeners(map, 'click');
    google.maps.event.addListenerOnce(map, 'click', function (event) {
        placeMarker(event.latLng);
    });

}

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        draggable: true,
        animation: google.maps.Animation.DROP,
        map: map
    });
    marker.mid = mid++;
    google.maps.event.addListener(marker, 'click', function () {
        if (infoWindow)
            infoWindow.close();
        infoWindow = new google.maps.InfoWindow({
            content: marker.mid.toString() + ": " + marker.getPosition().lat() + "|" + marker.getPosition().lng()
        });
        infoWindow.open(map, marker);
    });
}

function displayAllPlaces() {
    $.ajax({ url: "http://localhost:2043/Service1.svc/diadiem",
        success: function (data) {
            alert("Lấy danh sách bằng Ajax thành công");
            for (var i = 0; i < data.length; i++) {
                var pos = new google.maps.LatLng(data[i].ViDo, data[i].KinhDo); 
                map.setCenter(pos);
                placeSavedMarker(pos, data[i].GhiChu);
            }
        }
    });
}

function addPlace() {
    $.ajax({ url: "http://localhost:2043/Service1.svc/add",
        type: "POST",
        contentType: "application/json",
        data: "{\"Lng\":1, \"Lat\":2,\"Description\":\"Địa điểm vừa thêm\"}",
        success: function (data) {
            alert("Địa điểm vừa thêm bằng AJAX có ghi chú: " + data.Description);
        }
    });
}


function placeSavedMarker(location, description) {
    var marker = new google.maps.Marker({
        position: location,
        draggable: true,
        animation: google.maps.Animation.DROP,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function () {
        if (infoWindow)
            infoWindow.close();
        infoWindow = new google.maps.InfoWindow({
            content: description
        });
        infoWindow.open(map, marker);
    });
}